<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tilt Editor</title>
    <style type="text/css">
      body {
        overflow: hidden;
        background: #fff;
      }
      #code {
        position: absolute;
        margin: 0px;
        top: 0px;
        bottom: 0px;
        left: -20px;
        right: 0px;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <pre id="code"></pre>
    <script type="text/javascript" src="src/ace.js"></script>
    <script type="text/javascript" src="src/mode-html.js"></script>
    <script type="text/javascript" src="src/mode-scss.js"></script>
    <script type="text/javascript" src="src/theme-dawn.js"></script>

    <script>
      var scripts = {};

      window.refreshCodeEditor = function(type) {
        var editor = ace.edit("code");
        editor.setReadOnly(true);
        editor.setTheme("ace/theme/dawn");

        if (type === "html") {
          var HTMLMode = require("ace/mode/html").Mode;
          editor.getSession().setMode(new HTMLMode());
        }
        else if (type === "css") {
          var CSSMode = require("ace/mode/scss").Mode;
          editor.getSession().setMode(new CSSMode());
        }
      };
    </script>

  </body>
</html>
